<template>
    <a-form-item :label="label" :name="formkey" :label-col="labelCol">
        <div class="FormView">
            <a-dropdown :trigger="['click']" :destroyPopupOnHide="true">
                <a-input :name="formkey" v-model:value="Value">
                    <template #prefix>
                        <div class="BGValue" :style="{ backgroundColor: Value }"></div>
                    </template>
                </a-input>
                <template #overlay>
                    <a-menu class="MenuBox">
                        <ColorPacker :value="Value" ref="ColorPackerView" @ChangeColor="(color) => { Value = color }" />
                    </a-menu>
                </template>
            </a-dropdown>
            <a-button class="button" v-if="isHaveApi" @click="pickerEvent">
                <template #icon>
                    <span class="C-Icon">&#xe704;</span>
                </template>
            </a-button>
            <a-button :type="Code ? 'primary' : 'default'" class="button" v-if="codeStatus">
                <template #icon>
                    <span class="C-Icon">&#xe6d5;</span>
                </template>
            </a-button>
        </div>
    </a-form-item>
</template>
<script setup>
import ColorPacker from '../Base/ColorPacker.vue';
import { computed, ref } from 'vue';

const ColorPackerView = ref();

const props = defineProps(['label', 'code', 'disabled', 'codeStatus', 'labelWidth', 'formkey']);
const Value = defineModel('value');

const labelCol = computed(() => {
    if (props.labelWidth) {
        return { style: { width: props.labelWidth } }
    } else {
        return null
    }
});

const isHaveApi = ref(!!window.EyeDropper);

const pickerEvent = function () {
    const eyeDropper = new EyeDropper();
    eyeDropper.open().then((result) => {
        Value.value = result.sRGBHex;
    }).catch((e) => {
        console.log(e)
    });
}

</script>
<style scoped lang="less">
.MenuBox {
    width: 288px;
}

.BGValue {
    pointer-events: none;
    width: 22px;
    height: 22px;
    margin: 0 4px 0 -6px;
    border: 1px solid #d9d9d9;
}

:deep(.ant-input-prefix) {
    pointer-events: none;
}
</style>